import React from 'react';
import {
  SchemaForm,
  FormButtonGroup,
  Submit,
  Reset,
//   ISchema,
  // registerVirtualBox,
} from '@formily/antd'
// import { ArrayCards, Checkbox, Input, Select, DatePicker } from '@formily/antd-components'
import { CustomTreeSelectFieldSingle, CustomTreeSelectFieldMultiple } from 'components/formily/components/CustomTreeSelectFieldFormily';
import CustomUploadFieldFormily from 'components/formily/components/CustomUploadFieldFormily';
import 'antd/dist/antd.css'

// registerVirtualBox('ButtonGroup', FormButtonGroup)
// registerVirtualBox('Submit', Submit)
// registerVirtualBox('Reset', Reset)
// registerVirtualBox('CustomTreeSelectFieldSingle', CustomTreeSelectFieldSingle)

/*
const submitButonSceme : {[key: string]: ISchema} = {
  "NO_NAME_FIELD_$1": {
    "type": "object",
    "x-component": "ButtonGroup",
    "x-component-props": {
      "align": "center"
    },
    "properties": {
      "NO_NAME_FIELD_$2": {
        "type": "object",
        "x-component": "Submit",
        "x-component-props": {
          "children": "提交"
        }
      },
      "NO_NAME_FIELD_$3": {
        "type": "object",
        "x-component": "Reset",
        "x-component-props": {
          "children": "重置"
        }
      }
    }
  }
};
*/
const App = () => (
  <div style={{padding: 22, width: 200}}>
    <SchemaForm 
      editable={false}
      components={{ CustomTreeSelectFieldSingle, CustomTreeSelectFieldMultiple, CustomUploadFieldFormily }}
      labelCol={24}
      wrapperCol={24}
      schema={{
        type: 'object',
        properties: {
          person: {
            type: 'object',
            'x-component': 'CustomTreeSelectFieldSingle',
            'title': '只能选一个人',
            'x-component-props': {
              itemProps: {
                placeholder: '请选择人员'
              }
            },
            'x-props': {
              defaultValue: undefined,
            },
            'x-index': 2,
          },
          people: {
            type: 'array',
            'x-component': 'CustomTreeSelectFieldMultiple',
            'title': '可以选多个人😎',
            'x-component-props': {
              itemProps: {
                placeholder: '请选择人员'
              }
            },
            'x-index': 1,
          },
          'upload': {
            type: 'array',
            'x-component': 'CustomUploadFieldFormily',
            'x-component-props': {
              itemProps: {
                contentpart: true, // 只显示内容，不显示模板
              },
              params: {
                params: {
                  multiple: false,
                },
              }, 
            },
            'x-index': 0,
          },
        }
      }}
      onSubmit={(values)=>{
        console.log(values)
      }}
    >
      <FormButtonGroup>
        <Submit>查询</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </SchemaForm>
  </div>
)

export default App;